iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0

來輕鬆聊聊

今天的內容將著重在版面配置,利用這些屬性,可以讓一個網頁,從完全空白到能清楚的區分網頁中各種功能的區塊。


背景

  • 背景設定如同border(邊框)屬性,可以使用background屬性設定多種值,或另外以個別屬性做設定,這邊介紹常用的幾種:
    • background-color可以設定背景顏色,值為顏色名稱、16進位制、rgba表示法。
    • background-image是將圖片設定為目標區域的背景,必須在屬性內加入url("圖片位址"),位址可以是本機圖片或網路上的圖片。
    • background-repeat用於背景的重複形態,由於瀏覽器會預設將背景圖片重複填滿目標區域,若不希望重複,需要另外做調整。
    • background-size用來調整背景尺寸,值可為%(原圖的百分比)、寬 高(設定背景的寬和高,若只給一個數值則為寬的長度、高為自動)、cover(以較短的一邊等比放大至填滿背景)、contain(維持原圖大小)。
    • background後可同時設定多種值,不必按順序為:bg-imgrepeat-styleposition/bg-size(背景尺寸必須緊鄰repeat之後並用/隔開);background-color必須在最後。

範例

<!-- HTML -->
<body></body>
<!-- CSS -->
body {
  background: top/cover no-repeat url("https://i.ytimg.com/vi/Gy0muvjik6w/maxresdefault.jpg");
}

顯示效果如下

https://ithelp.ithome.com.tw/upload/images/20210906/20141326CiFNQYsRk5.jpg

外距和內距

  • 一個HTML元素除了本身的大小,在網頁中所佔據的空間由三個屬性來決定:border(邊框)、paddingmargin,HTML中所有元素的內外距都有預設值。
  • padding為內距,從邊框往內至元素的垂直距離,有幾種寫法:
    • padding: XX;,若只給一個值,則會設定為四邊相同的內距。
    • padding: XX XX XX;,給三個值,依序為上方、左=右、下方距離。
    • padding: XX XX XX XX;,給四個值,依序為上方、右方、下方、左方距離。
    • 也可以個別設定,padding-toppadding-bottompadding-leftpadding-right
  • margin為外距,從邊框往外的垂直距離,寫法與padding相同,將padding改為margin即可。

範例

<!-- HTML -->
<div id="container">
  <div id="box">padding</div>
</div>
<!-- CSS -->
#container {
  background: yellow;
  padding: 15px 20px 15px;
}
#box {
  background: blue;
  color: #FFF;
  padding: 15px 20px 15px;
  margin: 20px 15px 10px 30px;
  border: 5px solid green;
}

顯示效果如下

https://ithelp.ithome.com.tw/upload/images/20210906/20141326hXvytWc7Nz.jpg

繼承值與重要值

  • 在HTML元素中,由巢狀的結構組成。一層包著一層,外層稱為父元素,相對於內層子元素,子元素會繼承父元素的CSS屬性。
  • class屬性中,越後方的值,優先等級越高。
  • 若有任何屬性不想被繼承的緣故意外覆蓋,可於後方加上!important,則該屬性將會最優先被顯示來。
  • CSS屬性的優先等級: !important > 標籤內style > id選擇器屬性 > class選擇器後方值 > class選擇器前方值 > 標籤選擇器屬性值 > 繼承父元素的值

範例

<!-- HTML -->
<h1 id="orange-text" class="pink-text blue-text" >Hello Everybody!</h1>
<!-- CSS -->
body {
  background-color: black;
  font-family: monospace;
  color: green;
}
h1{
  color: red;
}
#orange-text {
  color: orange;
}
.pink-text {
  color: pink;
}
.blue-text {
  color: blue;
}

顯示效果如下

https://ithelp.ithome.com.tw/upload/images/20210906/201413265RaHCr0pd3.jpg


對於自學的人來說,該如何設定每一個元素和版面的配置,都是一件困難的事。
我認為這可以透過許多的練習來練手感。所以這邊建議可以嘗試用自己學過的語法慢慢做出一個網頁的外觀。
不管是透過教學網站、影片或是臨摹某個網站,都是很好的方式。
最後,期望自己能與大家一起進步!

內容來源:
freeCodeCamp|勞贖圖|CodePen


上一篇
CSS基礎介紹(1)
下一篇
CSS基礎介紹(3)
系列文
從freeCodeCamp進入前端宇宙9
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言